<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="mt-32 flex-1 overflow-auto px-48">
      <view class="page-block mb-20 px-40 py-50">
        <view class="page-block__hd pl-18">
          <view class="flex items-center">
            <view class="page-hd__icon mr-20 flex-center">
              <i class="iconfont icon-a-rongqi5" />
            </view>
            <view class="page-block__title">
              内科
            </view>
          </view>
          <view class="page-block__subtitle mt-6 text-30">
            点击查看各专科详细信息
          </view>
        </view>
        <view class="page-block__content mt-40">
          <wd-row :gutter="16">
            <wd-col v-for="item in 6" :key="item" :span="8">
              <view class="sub-section mb-20 text-truncate" :class="{ active: item === 1 }">
                心内科
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>

      <view class="page-block mb-20 px-40 py-50">
        <view class="page-block__hd pl-18">
          <view class="flex items-center">
            <view class="page-hd__icon mr-20 flex-center">
              <i class="iconfont icon-a-rongqi5" />
            </view>
            <view class="page-block__title">
              内科-心内科
            </view>
          </view>
          <view class="page-block__subtitle mt-6 text-24">
            心内科主要诊治心脏及血管相关疾病，包括冠心病、心力衰竭、心率失常等
          </view>
        </view>
        <view class="page-block__content mt-40 px-32">
          <view class="block-content__title">
            医生团队
          </view>
          <view class="block-content__list">
            <view v-for="item in 3" :key="item" class="doctor-item mt-20 flex items-center justify-between">
              <view>
                <view class="doctor-item__info">
                  张医生 - 主任医师
                </view>
                <view class="doctor-item__desc mt-12">
                  擅长: 心率失常、高血压
                </view>
              </view>
              <view class="doctor-item__time">
                周一、周三上午
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="page-block mb-20 px-40 py-50">
        <view class="page-block__hd pl-18">
          <view class="flex items-center">
            <view class="page-block__title">
              主要治疗疾病
            </view>
          </view>
        </view>
        <view class="page-block__content mt-40">
          <wd-row :gutter="16">
            <wd-col v-for="item in 21" :key="item" :span="8">
              <view class="disease-item mb-20 text-truncate" :class="{ active: item === 1 }">
                心内科
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '科室信息',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background-color: var(--bg-color);

  .page-block {
    border: 2px solid #e6effd;
    background: #d8e7ff;
    border-radius: 20px;

    .page-hd__icon {
      width: 72px;
      height: 78px;
      border-radius: 10px;
      background: #ebf3ff;

      .iconfont {
        color: var(--primary);
        font-size: 54px;
      }
    }

    .page-block__title {
      font-size: 48px;
      font-weight: bold;
      color: var(--text-color);
    }

    .page-block__subtitle {
      color: var(--secondary-text-color);
    }

    .block-content__title {
      color: var(--text-color);
      font-size: 36px;
      font-weight: bold;
    }

    .doctor-item {
      background: #f5f9ff;
      border-radius: 20px;
      padding: 33px 30px;
      border: 2px solid rgba(255, 255, 255, 0.5);

      .doctor-item__info {
        color: var(--text-color);
        font-size: 32px;
        font-weight: 500;
      }

      .doctor-item__desc {
        color: #686869;
        font-size: 24px;
      }

      .doctor-item__time {
        background: #dfecff;
        border-radius: 20px;
        color: var(--primary);
        font-size: 30px;
        padding: 20px 34px;
      }
    }

    .sub-section {
      background: #ffffff;
      border-radius: 10px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      text-align: center;
      font-size: 36px;
      color: #3d3d3d;
      padding: 20px 12px;
      &.active {
        background-color: var(--primary);
        color: #fff;
      }
    }

    .disease-item {
      background: #eff5ff;
      border-radius: 100px;
      color: var(--primary);
      font-size: 32px;
      padding: 12px 60px;
      text-align: center;
    }
  }
}
</style>
